星尘

11. 首页组件的拆分

发表于 更新于 分类于

首页组件的拆分

在src下创建pages文件夹，并在下面创建home，detail文件夹。在home下面建立components文件夹和index.js和style.js

App.js中将路由和组件关联起来

1
2
<Route path='/' exact component={ Home }> </Route> 
<Route path='/detail' component={ Detail }> </Route>

在home下的components文件夹中创建各个组件，在home的index.js中引入这些组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React, { Component } from 'react'
import Topic from './components/Topic' 
import List from './components/List' 
import Recommend from './components/Recommend' 
import Writer from './components/Writer' 

import { 
	HomeWrapper,
	HomeLeft,
	HomeRight
} from './style';


class Home extends Component {
	render(){
		return (
			<HomeWrapper> 
				<HomeLeft > 
					<img className='banner-img' src='xxx' />
					<Topic />
					<List />
				</HomeLeft>
				<HomeRight> 
					<Recommend />
					<Writer/ >
				</HomeRight>
			</HomeWrapper>
		)
	}
}

export default Home;

代码地址